<script setup lang="ts">
import { ref, watch } from 'vue';
import { updateFillTemplate } from '@/service/api';
import { $t } from '@/locales';

defineOptions({
  name: 'TemplateFormDesigner'
});

interface Props {
  template: Api.Dataplatform.FillTemplate | null;
}

const props = defineProps<Props>();

interface Emits {
  (e: 'success'): void;
}

const emit = defineEmits<Emits>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const formConfig = ref('');
const validationRules = ref('');
const approvalFlow = ref('');

function handleInitModel() {
  if (props.template) {
    formConfig.value = props.template.formConfig || '';
    validationRules.value = props.template.validationRules || '';
    approvalFlow.value = props.template.approvalFlow || '';
  }
}

function closeDrawer() {
  visible.value = false;
}

async function handleSubmit() {
  if (!props.template) {
    return;
  }

  const data: Api.Dataplatform.FillTemplateEdit = {
    id: props.template.id,
    name: props.template.name,
    code: props.template.code,
    status: props.template.status,
    formConfig: formConfig.value,
    validationRules: validationRules.value,
    approvalFlow: approvalFlow.value
  };

  const { error } = await updateFillTemplate(data);
  if (!error) {
    window.$message?.success($t('common.updateSuccess'));
    closeDrawer();
    emit('success');
  }
}

watch(visible, () => {
  if (visible.value) {
    handleInitModel();
  }
});
</script>

<template>
  <NDrawer v-model:show="visible" display-directive="show" :width="900">
    <NDrawerContent :title="$t('page.dataplatform.fill.formDesigner')" :native-scrollbar="false" closable>
      <div class="h-full flex-col gap-16px">
        <NAlert type="info" :show-icon="false">
          {{ $t('page.dataplatform.fill.formDesignerTip') }}
        </NAlert>

        <NCard :title="$t('page.dataplatform.fill.formConfig')" size="small">
          <NInput
            v-model:value="formConfig"
            type="textarea"
            :placeholder="$t('page.dataplatform.fill.formConfigPlaceholder')"
            :rows="10"
          />
          <template #footer>
            <NText depth="3">{{ $t('page.dataplatform.fill.formConfigDesc') }}</NText>
          </template>
        </NCard>

        <NCard :title="$t('page.dataplatform.fill.validationRules')" size="small">
          <NInput
            v-model:value="validationRules"
            type="textarea"
            :placeholder="$t('page.dataplatform.fill.validationRulesPlaceholder')"
            :rows="8"
          />
          <template #footer>
            <NText depth="3">{{ $t('page.dataplatform.fill.validationRulesDesc') }}</NText>
          </template>
        </NCard>

        <NCard :title="$t('page.dataplatform.fill.approvalFlow')" size="small">
          <NInput
            v-model:value="approvalFlow"
            type="textarea"
            :placeholder="$t('page.dataplatform.fill.approvalFlowPlaceholder')"
            :rows="6"
          />
          <template #footer>
            <NText depth="3">{{ $t('page.dataplatform.fill.approvalFlowDesc') }}</NText>
          </template>
        </NCard>
      </div>

      <template #footer>
        <NSpace justify="end">
          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
          <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
        </NSpace>
      </template>
    </NDrawerContent>
  </NDrawer>
</template>

<style scoped></style>
